<template>
  <div class="projects">
    <div class="title">
      <span>Hi KAKUTOSYOU,</span>
      <div>here is your currently projects</div>
    </div>
    <div class="team-box">
      <div class="team-title">
        Team
      </div>
      <div class="team-body">
        <div class="UI">
          UI
        </div>
      </div>
    </div>
    <div class="projects-box">
      <div class="team-title">
        Projects
      </div>
      <div class="bodys"></div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.projects {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-left: 205px;
  box-sizing: border-box;
  .title{
    display: flex;
    margin-top: 70px;

    &>span{
      color: black;
      font-size: 20px;
    }
    &>div{
      align-self: self-end;
      color: rgb(82, 81, 81);
      font-size: 15px;
    }
  }
  .team-box,.projects-box{
    margin-top: 36px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 1px solid rgb(223, 221, 221);
    .team-title{
      color: black;
      font-size: 15px;
      margin-bottom: 15px;
    }
    .team-body{
      position: relative;
      width: 458px;
      height: 165px;
      background: url("@/assets/pic/team.png") no-repeat;
      background-size: 100% 100%;
      .UI{
        position: absolute;
        top: 34px;
        left: 39px;
        font-size: 25px;
        color: white;
      }
    }
  }
  .projects-box{
    .bodys{
      width: 458px;
      height: 208px;
      background: url("@/assets/pic/ppp.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
